<template>
    <div class="lack-wrapper boxWrapper" v-loading="tableLoading" element-loading-text="数据加载中，请稍后" element-loading-spinner="el-icon-loading" >
       <el-table :data="missingList" height="calc(100vh - 220px)" v-if="missingList.length > 0" border>
          <el-table-column prop="instR_Name" label="监测项目" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="pointName" label="监测名称" align="center"></el-table-column>
          <el-table-column prop="tactics" label="观测频次" align="center">
            <template slot-scope="scope">
                <div v-if=" scope.row.tactics">
                    <el-tag v-if=" scope.row.tactics.includes('天')" size="small">{{ scope.row.tactics }}</el-tag>

                <el-tag type="success" v-else-if=" scope.row.tactics.includes('月')" size="small">{{ scope.row.tactics }}</el-tag>

                <el-tag type="danger" v-else-if=" scope.row.tactics.includes('年')" size="small">{{ scope.row.tactics }}</el-tag>

                <div class="custom-yellow-tag small-tag" v-else-if=" scope.row.tactics.includes('季度')" >{{ scope.row.tactics }}</div>

                <div class="custom-orange-tag small-tag"  v-else >{{ scope.row.tactics }}</div>
                </div>
            </template>
          </el-table-column>
          <el-table-column prop="lastTime" label="上次观测时间" align="center">
            
          </el-table-column>
          <el-table-column prop="finallyTime" label="最晚观测时间" align="center">
            
          </el-table-column>
          <el-table-column prop="alarmTime" label="提醒时间" align="center">
            
          </el-table-column>
        </el-table>
        <noData showData v-if="missingList.length == 0"/>
    </div>
</template>

<script>


import {getMissingTestAlarm} from "@/api/https";
import noData from '@/components/base/noData.vue'
export default ({
    name:'lack',
    components:{noData},
    props:{
        stationId:{
            type:[String,Number],
            default:''
        },
    },
    data() {
        return{
            missingList:[],
            tableLoading:false,
        }
    },

    created(){
        this.getDataList()
    },
    beforeDestroy(){
        this.missingList = []
    },
    watch:{
        'stationId':{
            handler(newVal,oldVal){
                this.getDataList()
            }
        },
    },
    methods:{
        getDataList(){
            this.tableLoading = true
            getMissingTestAlarm({
                STATION_ID:this.stationId
            }).then(res =>{
                if(res.isSuccess){
                    this.tableLoading = false
                    if(res.data && res.data.missingTestAlarms.length > 0){
                        this.missingList = res.data.missingTestAlarms
                    }else{
                        this.missingList = []
                    }
                }else{
                    this.tableLoading = false
                    this.$message.error(res.errorMessage)
                }
            })
        }
        
    }
})
</script>
<style lang="scss" scoped>
.lack-wrapper{
    display: grid;
    height: calc(100vh - 180px);
    overflow: auto;
    margin-top:10px;
    padding:10px;
    box-sizing: border-box;
}
</style>